<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Menu from "./Menu.svelte";
    import Icon from "@iconify/svelte";
    import SubMenu from "./SubMenu.svelte";
    import MenuItem from "./MenuItem.svelte";
    import MenuGroup from "./MenuGroup.svelte";
    import { Button } from "../Button";

    const { Story } = defineMeta({
        title: "Components/Navigation/Menu",
        component: Menu,
        subcomponents: {
            SubMenu,
            MenuItem,
            MenuGroup,
        },
        tags: ["autodocs"],
        argTypes: {
            theme: {
                control: "select",
                options: ["light", "dark"],
            },
        },
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <div style="height: 300px;">
            <Menu dir="h">
                <SubMenu name="1" title="角色管理">
                    {#snippet icon()}
                        <Icon icon="f7:person2-fill" />
                    {/snippet}
                    <SubMenu name="11" title="添加" align="rightTop">
                        <MenuItem name="111">添加超管</MenuItem>
                        <MenuItem name="112">添加职员</MenuItem>
                    </SubMenu>
                    <MenuItem name="12">修改</MenuItem>
                    <MenuItem name="13">删除</MenuItem>
                </SubMenu>
                <MenuItem name="2">
                    {#snippet icon()}
                        <Icon icon="f7:person-fill" />
                    {/snippet}
                    用户管理
                </MenuItem>
                <MenuItem name="31">{#snippet icon()}<Icon icon="f7:list-bullet" />{/snippet}菜单管理</MenuItem>
                <MenuItem name="33">{#snippet icon()}<Icon icon="f7:gear" />{/snippet}权限管理</MenuItem>
                <SubMenu name="32" title="字典管理">
                    {#snippet icon()}<Icon icon="f7:gear" />{/snippet}
                    <MenuGroup name="321" title="系统字典">
                        <MenuItem name="3211">添加</MenuItem>
                        <MenuItem name="3212">修改</MenuItem>
                        <MenuItem name="3213">删除</MenuItem>
                    </MenuGroup>
                    <MenuGroup name="322" title="客户字典">
                        <MenuItem name="3221">添加</MenuItem>
                        <MenuItem name="3222">修改</MenuItem>
                        <MenuItem name="3223">删除</MenuItem>
                    </MenuGroup>
                </SubMenu>
            </Menu>
        </div>
    {/snippet}
</Story>

<Story name="Vertical">
    {#snippet template(args)}
        <div style="width: 220px; border-right: 1px solid var(--cui-color-border)">
            <Menu dir="v" activeName="3211">
                <SubMenu name="1" title="角色管理">
                    {#snippet icon()}
                        <Icon icon="f7:person-2-alt" />
                    {/snippet}
                    <MenuItem name="11">添加</MenuItem>
                    <MenuItem name="12">修改</MenuItem>
                    <MenuItem name="13">删除</MenuItem>
                </SubMenu>
                <MenuItem name="2">
                    {#snippet icon()}
                        <Icon icon="f7:person-fill" />
                    {/snippet}
                    用户管理
                </MenuItem>
                <MenuItem name="31">{#snippet icon()}<Icon icon="f7:list-bullet" />{/snippet}菜单管理</MenuItem>
                <MenuItem name="33">{#snippet icon()}<Icon icon="f7:gear" />{/snippet}权限管理</MenuItem>
                <SubMenu name="32" title="字典管理">
                    {#snippet icon()}<Icon icon="f7:gear" />{/snippet}
                    <MenuGroup name="321" title="系统字典">
                        <MenuItem name="3211">添加</MenuItem>
                        <MenuItem name="3212">修改</MenuItem>
                        <MenuItem name="3213">删除</MenuItem>
                    </MenuGroup>
                    <MenuGroup name="322" title="客户字典">
                        <MenuItem name="3221">添加</MenuItem>
                        <MenuItem name="3222">修改</MenuItem>
                        <MenuItem name="3223">删除</MenuItem>
                    </MenuGroup>
                </SubMenu>
            </Menu>
        </div>
    {/snippet}
</Story>

<Story name="Accordion">
    {#snippet template(args)}
        <div style="width: 220px; border-right: 1px solid var(--cui-color-border)">
            <Menu dir="v" activeName="3211" accordion>
                <SubMenu name="1" title="角色管理">
                    {#snippet icon()}
                        <Icon icon="f7:person-2-alt" />
                    {/snippet}
                    <MenuItem name="11">添加</MenuItem>
                    <MenuItem name="12">修改</MenuItem>
                    <MenuItem name="13">删除</MenuItem>
                </SubMenu>
                <MenuItem name="2">
                    {#snippet icon()}
                        <Icon icon="f7:person-fill" />
                    {/snippet}
                    用户管理
                </MenuItem>
                <MenuItem name="31">{#snippet icon()}<Icon icon="f7:list-bullet" />{/snippet}菜单管理</MenuItem>
                <MenuItem name="33">{#snippet icon()}<Icon icon="f7:gear" />{/snippet}权限管理</MenuItem>
                <SubMenu name="32" title="字典管理">
                    {#snippet icon()}<Icon icon="f7:gear" />{/snippet}
                    <MenuGroup name="321" title="系统字典">
                        <MenuItem name="3211">添加</MenuItem>
                        <MenuItem name="3212">修改</MenuItem>
                        <MenuItem name="3213">删除</MenuItem>
                    </MenuGroup>
                    <MenuGroup name="322" title="客户字典">
                        <MenuItem name="3221">添加</MenuItem>
                        <MenuItem name="3222">修改</MenuItem>
                        <MenuItem name="3223">删除</MenuItem>
                    </MenuGroup>
                </SubMenu>
            </Menu>
        </div>
    {/snippet}
</Story>

<Story name="Theme" args={{ theme: "dark" }}>
    {#snippet template(args)}
        <Menu dir="h" activeName="3211" {...args}>
            <SubMenu name="1" title="角色管理">
                {#snippet icon()}
                    <Icon icon="f7:person-2-alt" />
                {/snippet}
                <MenuItem name="11">添加</MenuItem>
                <MenuItem name="12">修改</MenuItem>
                <MenuItem name="13">删除</MenuItem>
            </SubMenu>
            <MenuItem name="2">
                {#snippet icon()}
                    <Icon icon="f7:person-fill" />
                {/snippet}
                用户管理
            </MenuItem>
            <MenuItem name="31">{#snippet icon()}<Icon icon="f7:list-bullet" />{/snippet}菜单管理</MenuItem>
            <MenuItem name="33">{#snippet icon()}<Icon icon="f7:gear" />{/snippet}权限管理</MenuItem>
            <SubMenu name="32" title="字典管理">
                {#snippet icon()}<Icon icon="f7:gear" />{/snippet}
                <MenuGroup name="321" title="系统字典">
                    <MenuItem name="3211">添加</MenuItem>
                    <MenuItem name="3212">修改</MenuItem>
                    <MenuItem name="3213">删除</MenuItem>
                </MenuGroup>
                <MenuGroup name="322" title="客户字典">
                    <MenuItem name="3221">添加</MenuItem>
                    <MenuItem name="3222">修改</MenuItem>
                    <MenuItem name="3223">删除</MenuItem>
                </MenuGroup>
            </SubMenu>
        </Menu>
        <div style="width: 220px; border-right: 1px solid var(--cui-color-border)">
            <Menu dir="v" activeName="3211" {...args}>
                <SubMenu name="1" title="角色管理">
                    {#snippet icon()}
                        <Icon icon="f7:person-2-alt" />
                    {/snippet}
                    <MenuItem name="11">添加</MenuItem>
                    <MenuItem name="12">修改</MenuItem>
                    <MenuItem name="13">删除</MenuItem>
                </SubMenu>
                <MenuItem name="2">
                    {#snippet icon()}
                        <Icon icon="f7:person-fill" />
                    {/snippet}
                    用户管理
                </MenuItem>
                <MenuItem name="31">{#snippet icon()}<Icon icon="f7:list-bullet" />{/snippet}菜单管理</MenuItem>
                <MenuItem name="33">{#snippet icon()}<Icon icon="f7:gear" />{/snippet}权限管理</MenuItem>
                <SubMenu name="32" title="字典管理">
                    {#snippet icon()}<Icon icon="f7:gear" />{/snippet}
                    <MenuGroup name="321" title="系统字典">
                        <MenuItem name="3211">添加</MenuItem>
                        <MenuItem name="3212">修改</MenuItem>
                        <MenuItem name="3213">删除</MenuItem>
                    </MenuGroup>
                    <MenuGroup name="322" title="客户字典">
                        <MenuItem name="3221">添加</MenuItem>
                        <MenuItem name="3222">修改</MenuItem>
                        <MenuItem name="3223">删除</MenuItem>
                    </MenuGroup>
                </SubMenu>
            </Menu>
        </div>
    {/snippet}
</Story>

<Story name="Min" args={{ min: true }}>
    {#snippet template(args)}
        <div style={`display: inline-flex; transition: all 0.25s ease-in-out; transform-origin: left top; border-right: 1px solid var(--cui-color-border)`}>
            <Menu dir="v" {...args}>
                <SubMenu name="1" title="角色管理">
                    {#snippet icon()}
                        <Icon icon="f7:person-2-alt" />
                    {/snippet}
                    <MenuItem name="11">添加</MenuItem>
                    <MenuItem name="12">修改</MenuItem>
                    <MenuItem name="13">删除</MenuItem>
                </SubMenu>
                <MenuItem name="2">
                    {#snippet icon()}
                        <Icon icon="f7:person-fill" />
                    {/snippet}
                    用户管理
                </MenuItem>
                <MenuItem name="31">{#snippet icon()}<Icon icon="f7:list-bullet" />{/snippet}菜单管理</MenuItem>
                <MenuItem name="33">{#snippet icon()}<Icon icon="f7:gear" />{/snippet}权限管理</MenuItem>
                <SubMenu name="32" title="字典管理">
                    {#snippet icon()}<Icon icon="f7:gear" />{/snippet}
                    <MenuGroup name="321" title="系统字典">
                        <MenuItem name="3211">添加</MenuItem>
                        <MenuItem name="3212">修改</MenuItem>
                        <MenuItem name="3213">删除</MenuItem>
                    </MenuGroup>
                    <MenuGroup name="322" title="客户字典">
                        <MenuItem name="3221">添加</MenuItem>
                        <MenuItem name="3222">修改</MenuItem>
                        <MenuItem name="3223">删除</MenuItem>
                    </MenuGroup>
                </SubMenu>
            </Menu>
        </div>
        <div>
            <Button onclick={() => (args.min = !args.min)}>展开收缩</Button>
        </div>
    {/snippet}
</Story>
